<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="加载中"></u-loading-page>
		<view class="mine_box" v-if="!loadding">
			<view class="" style="display: flex;justify-content: space-between;">
				<view></view>
				<message :color="'#909399'" :read="read"></message>
			</view>
			<view class="portrait_box">
				<u-avatar :src="src" shape="circle" default-url="../../static/default.jpg" size="55"
					style="border: 4rpx #fff solid;" @click="avatar = true"></u-avatar>
				<view class="portrait_name">
					<view class="">
						<text class="name">{{userInfo.name}}</text>
					</view>
					<view class="Real_name">
						<text>{{userInfo.phone}}</text>
						<view class="Real" v-if="userInfo.is_real_name !=2" @click="_realname"
							style="background-color: #b0d6ff">实名认证</view>
						<view class="Real v_ico" v-else
							style="background-image: linear-gradient(to right, #dce5fc , #8fc9fb);">
							<image src="@/static/V_ico.png" mode=""></image>
							实名认证
						</view>
						<view class="vivisection" v-if="userInfo.is_sign ==1" @click="_vivisection">
							未签约
						</view>
						<view class="vivisection v_ico" v-else>
							<image src="@/static/V_ico.png" mode=""></image>
							已签约
						</view>
					</view>
				</view>
			</view>
			<view v-if="userInfo.IOS_set == 1" class="portrait_list">
				<view class="portrait_cont">
					<text>账户余额(元)</text>
					<text class="nmb">{{balance}}</text>
				</view>
				<view class="check" @click="profit_info()">
					去提现
					<image class="triangle" src="@/static/sanjiao.png" mode=""></image>
				</view>
			</view>
			<view v-else class="portrait_list">
				<view class="portrait_cont">
					<text>我的交易</text>
					<text class="nmb">0.00</text>
				</view>
				<view class="check" @click="trade_info()">
					去查看
					<image class="triangle" src="@/static/sanjiao.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="mine_head" v-if="!loadding">
			<!-- 账户明细 -->
			<block v-for="(item,index) in menu" :key="index">
				<view class="" @click="account" v-if="item.code == 'account'">
					<image src="../../static/account_bg.png" mode=""></image>
				</view>
			</block>
			<!-- 业务推广 -->
			<block v-for="(item,index) in menu" :key="index">
				<view class="" @click="about_us(1,'业务推广')" v-if="item.code == 'aboutus'">
					<image src="../../static/popularize_bg.png" mode=""></image>
				</view>
			</block>
		</view>
		<view class="mine_list_box" v-if="!loadding">
			<!-- <view class="mine_list" @click="policy">
				<view class="list">
					<image src="@/static/tuiguang.png" mode=""></image>
					<text>我的政策</text>
				</view>
				<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
			</view> -->
			<!-- <view class="mine_list" @click="rate">
				<view class="list">
					<image src="@/static/rate.png" mode=""></image>
					<text>费率修改</text>
				</view>
				<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
			</view> -->
			<view class="mine_list" @click="show = true">
				<view class="list">
					<image src="/static/icons/contact.png" mode=""></image>
					<text>联系客服</text>
				</view>
				<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
			</view>
			<view class="mine_list" @click="about_us(2,'关于我们')">
				<view class="list">
					<image src="/static/icons/about.png" mode=""></image>
					<text>关于我们</text>
				</view>
				<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
			</view>
			<view class="mine_list" @click="setup">
				<view class="list">
					<image src="/static/icons/setting.png" mode=""></image>
					<text>设置</text>
				</view>
				<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
			</view>
			<view class="mine_list" @click="app_download">
				<view class="list">
					<image src="/static/icons/app_download.png" mode=""></image>
					<text>APP下载</text>
				</view>
				<u-icon name="arrow-right" color="#aeaeae" size="14"></u-icon>
			</view>
			<u-popup :show="show" @close="show = false">
				<view class="phone_box">
					<text class="phone" @click="_customer">{{customer}}</text>
					<text @click.stop="show = false">取消</text>
				</view>
			</u-popup>
			<u-popup :show="avatar" @close="avatar = false">
				<view class="phone_box">
					<view class="avatar_box">
						<text class="" @click="_picture">拍照</text>
						<text class="" @click="_getFile">手机相册选择</text>
						<text v-if="userInfo.is_shareholder==2" class="" @click="shareholder">股东管理</text>
					</view>
					<text @click.stop="avatar = false">取消</text>
				</view>
			</u-popup>
			<u-popup :show="appDownShow" mode="center" @close="appDownShow = false">
				<view class="download">
					<view class="download-main">
						<view class="title">
							<text>星展业APP下载</text>
						</view>
						<view class="app-qrcode">
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrcode_url" @complete="complete"
								:size="190">
							</uqrcode>
						</view>
						<view class="message">
							<text>请使用浏览器扫码下载</text>
						</view>
					</view>
				</view>
			</u-popup>
			<u-modal :show="passwordShow" :title="passwordTitle" showCancelButton cancelText="取消" @cancel="passwordShow = false" @close="passwordShow = false" @confirm="pwdClick">
				<view class="slot-content">
					<u--input type="password" border="surround" placeholder="请输入密码" placeholderStyle="color: #c8c9cc" v-model="password"></u--input>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import message from '@/component/message.vue'
	var util = require('@/util/request.js');
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				loadding: false,
				src: '',
				show: false,
				avatar: false,
				userInfo: {},
				balance: '',
				a_File: '',
				customer: '',
				menu: [],
				appDownShow: false,
				qrcode_url: '',
				versions: '',
				device_id: '',
				device_model: '',
				brand: '',
				os_name: '',
				os_version: '',
				login_type: 1,
				read: 0,
				passwordTitle: '密码验证',
				passwordShow: false,
				password: '',
			}
		},
		components: {
			message
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userinfo');
			this.src = util.realm_name.substr(0, util.realm_name.length - 5) + this.userInfo.avatar
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.versions = res.appVersion
					_this.device_id = res.deviceId
					_this.device_model = res.deviceModel
					_this.brand = res.brand == undefined ? '' : res.brand
					_this.os_name = res.osName
					_this.os_version = res.osVersion
				}
			});
			this._balance()
			this.getUserInfo()
			if (this.userInfo.is_sign == 1) {
				this.getSignState()
			}
			this.getNoReadMessage()
		},
		onLoad() {
			this.service()
			this._menu()
			this.qrcode_url = util.API_URL + '/apk/xingzhanye.apk'
		},
		methods: {
			// APP下载二维码
			complete() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						// console.log(res);
					}
				});
			},
			// 我的政策
			policy() {
				uni.navigateTo({
					url: '/pages/mine/policy/policy'
				})
			},
			// 我的费率
			rate() {
				uni.navigateTo({
					url: '/pages/mine/rate/product'
				})
			},
			// 获取未读信息
			async getNoReadMessage() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'setting/getNoReadMessage'
				});
				if (res.code == 200) {
					this.read = res.data
				}
			},
			// 菜单展示
			async _menu() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'menu/getData',
				});
				if (res.code == 200) {
					this.menu = res.data
				}
			},
			// 余额列表
			async _balance() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyBalance'
				});
				this.loadding = false
				if (res.code == 200) {
					this.balance = res.data
				}
			},
			// 账户明细
			account() {
				// uni.navigateTo({
				// 	url: '/pages/mine/account/account'
				// })
				uni.navigateTo({
					url: '/pages/mine/account/account_total'
				})
			},
			// 去提现
			profit_info() {
				var _this = this
				if (this.userInfo.is_real_name == 1) {
					uni.showModal({
						title: '提示',
						content: '您还未实名认证，是否去实名认证？',
						success: function(ress) {
							if (ress.confirm) {
								_this._realname()
							}
						}
					});
				}
				if (this.userInfo.is_real_name == 2 && this.userInfo.is_sign == 1) {
					uni.showModal({
						title: '提示',
						content: '您还未签约，是否去签约？',
						success: function(ress) {
							if (ress.confirm) {
								_this._vivisection()
							}
						}
					});
				}
				if (this.userInfo.is_real_name == 2 && this.userInfo.is_sign == 2) {
					uni.navigateTo({
						url: '/pages/mine/profit/Cash/Cashs'
					})
				}
			},
			//实名认证
			_realname() {
				uni.navigateTo({
					url: '/pages/mine/realname/realname'
				})
			},
			// 签约
			_vivisection() {
				var _this = this
				if (this.userInfo.is_real_name == 1) {
					uni.showModal({
						title: '提示',
						content: '您还未实名认证，是否去实名认证？',
						success: function(ress) {
							if (ress.confirm) {
								_this._realname()
							}
						}
					});
				} else {
					this.getSignSrc()
				}
			},
			// 获取H5签约链接
			async getSignSrc() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getSignSrc',
				});
				uni.hideLoading()
				if (res.code == 200) {
					uni.navigateTo({
						url: '/pages/mine/realname/signweb?url=' + res.data.data
					})
				}
			},
			//设置
			setup() {
				uni.navigateTo({
					url: '/pages/mine/setup/setup'
				})
			},
			//关于我们
			about_us(id, name) {
				uni.navigateTo({
					url: '/pages/mine/aboutus/aboutus?id=' + id + '&name=' + name
				})
			},
			//更换头像
			_getFile() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								_this.uploadFile(base64)
								_this.avatar = false
							})
							.catch(error => {
								console.error(error)
							})
					}
				});
			},
			// 上传头像
			_picture() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相机选择
					success: function(res) {
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								_this.uploadFile(base64)
								_this.avatar = false
							})
							.catch(error => {})
					}
				});
			},
			// 上传头像
			async uploadFile(base) {
				const {
					data: res
				} = await this.$myHttp({
					url: 'common/uploadFile',
					data: {
						file: base
					},
				});
				if (res.code == 200) {
					this.a_File = res.data.url
					this._avatar()
				}
			},
			// 上传头像
			async _avatar() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'user/profile',
					data: {
						avatar: this.a_File
					},
				});
				uni.showToast({
					title: '保存成功',
					icon: 'none',
					duration: 2000
				})
				if (res.code == 200) {
					this.userInfo.avatar = res.data.avatar
					uni.setStorageSync('userinfo', this.userInfo);
					this.src = util.realm_name.substr(0, util.realm_name.length - 5) + res.data.avatar
				}
			},
			// 联系客服
			async service() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getKefu'
				});
				if (res.code == 200) {
					this.customer = res.data
				}
			},
			// 拨打电话
			_customer() {
				uni.makePhoneCall({
					phoneNumber: this.customer
				});
			},
			// 显示APP下载
			app_download() {
				this.appDownShow = true
			},
			// 获取用户信息
			async getUserInfo() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'user/getUserInfo',
					data: {
						login_type: this.login_type,
						versions: this.versions,
						device_id: this.device_id,
						device_model: this.device_model,
						brand: this.brand,
						os_name: this.os_name,
						os_version: this.os_version
					}
				});
				if (res.code == 200) {
					uni.setStorageSync('userinfo', res.data);
					this.userInfo = res.data
					this.src = util.realm_name.substr(0, util.realm_name.length - 5) + res.data.avatar
				}
			},
			// 获取签约状态
			async getSignState() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getSignState'
				});
				if (res.code == 200) {
					this.userInfo.is_sign = 2
					uni.setStorageSync('userinfo', this.userInfo);
				}
			},
			// 股东管理
			shareholder() {
				this.avatar = false
				this.passwordShow = true
				// uni.navigateTo({
				// 	url: '/pages/hzy/shareholder/index'
				// })
			},
			// 确认密码
			pwdClick() {
				if (this.password == '' || this.password == null) {
					uni.showToast({
						title: '请输入密码',
						icon: "none"
					});
					return false
				}
				this.pwdSub()
			},
			// 密码提交
			async pwdSub() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'user/pwdVerifiy',
					data: {
						password: this.password
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: "none"
				});
				if (res.code == 200) {
					this.passwordShow = false
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/hzy/shareholder/index'
						})
					}, 500)
				}
			},
			trade_info() {
				uni.navigateTo({
					url: '/pages/hzy/trade/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F6FC;
	}

	.mine_box {
		background: url('../../static/mine_bg1.jpg') no-repeat center;
		background-size: 100% 100%;
		padding: 25rpx;
		padding-top: 60rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin-bottom: 0rpx;

		.portrait_box {
			display: flex;
			align-items: center;

			.portrait_name {
				display: flex;
				flex-direction: column;
				margin-left: 40rpx;

				text {
					font-size: 24rpx;
					color: #fff;
				}

				.platform_tags {
					margin-left: 10rpx;
					padding: 2rpx 8rpx;
					border-radius: 10rpx;
				}

				.blues {
					background-color: #2979ff;
				}

				.reds {
					background-color: #fa3534;
				}

				.Real_name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;

					text {
						color: #010101;
						font-size: 24rpx;
					}

					.Real {
						padding: 5rpx 15rpx;
						border-radius: 50rpx;
						color: #fff;
						font-size: 18rpx;
						margin-left: 30rpx;
					}

					.v_ico {
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
					}

					.vivisection {
						background-color: #fab6b6;
						padding: 5rpx 15rpx;
						border-radius: 50rpx;
						color: #fff;
						font-size: 18rpx;
						margin-left: 30rpx;
					}
				}

				.name {
					font-size: 40rpx;
					margin-bottom: 20rpx;
					// color: #018afe;
					color: #1f1f1f;
					font-weight: bold;
				}
			}
		}

		.portrait_list {
			display: flex;
			margin-top: 55rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			flex-wrap: wrap;
			position: relative;

			.check {
				display: flex;
				align-items: center;
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translate(0%, -50%);
				background-color: #ffeede;
				padding: 20rpx 40rpx;
				padding-right: 0;
				border-radius: 100px;
				font-size: 24rpx;
				color: #fd7a04;

				.triangle {
					width: 16rpx;
					height: 24rpx;
					padding-left: 20rpx;
					margin-right: 20rpx;
				}
			}

			.portrait_cont {

				background-image: linear-gradient(#fffcf9, #fff8f2);
				padding: 40rpx;
				position: relative;
				height: 205rpx;
				border: 4rpx solid #fff;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				flex: 1;
				box-sizing: border-box;
				min-width: 20%;

				text {
					font-size: 28rpx;
					color: #666666;
				}

				.nmb {
					margin-top: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #fc7a02;
				}
			}

			.portrait_cont:not(:first-child):before {
				position: absolute;
				content: '';
				left: 0;
				height: 40rpx;
				width: 1px;
				background-color: #dfe6fc;
			}
		}
	}

	.mine_list_box {
		padding: 30rpx;
		box-sizing: border-box;

		.mine_list {
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: #eee 1px solid;
			padding: 40rpx 20rpx;
			box-sizing: border-box;

			.list {
				display: flex;
				align-items: center;

				text {
					font-size: 32rpx;
					margin-left: 20rpx;

				}

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		.phone_box {
			box-sizing: border-box;

			.phone {
				margin-bottom: 20rpx;
				border-bottom: #eee 1px solid;
				padding: 30rpx;
			}

			.avatar_box {
				margin-bottom: 30rpx;

				text {
					border-bottom: #eee solid 1px;
					padding: 20rpx 0;
					margin: 0;
				}
			}

			text {
				font-size: 32rpx;
				color: #1296db;
				text-align: center;
				display: block;
				margin-bottom: 30rpx;
				transition: all 0.5s;
			}

			text:active {
				background-color: #ebebeb;
			}
		}
	}

	.mine_head {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;

		view {
			width: 335rpx;
			height: 166rpx;
			border-radius: 15rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.download {

		.download-main {
			margin: 50rpx 100rpx;

			.title {
				font-size: 40rpx;
				font-weight: bold;
				text-align: center;
				padding-bottom: 50rpx;
				border-bottom: 1px solid #ebebeb;
			}

			.app-qrcode {
				padding: 40rpx 0;
			}

			.message {
				border-top: 1px solid #ebebeb;
				padding-top: 20rpx;
				font-size: 32rpx;
				color: #fa3534;
			}
		}
	}
</style>